[id].vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. <template>
  2. <!-- 页面头部 -->
  3. <HomePageHead></HomePageHead>
  4. <!-- 页面导航 -->
  5. <HomePageNavigation></HomePageNavigation>
  6. <!-- 广告1 -->
  7. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  8. <!-- 面包屑导航 -->
  9. <PublicBreadcrumb :articleName="newsDetail.title"></PublicBreadcrumb>
  10. <!-- 资讯列表 -->
  11. <div class="newsDetail">
  12. <div class="inner">
  13. <div class="innerLeft">
  14. <div class="LeftTop">
  15. <h1>{{ newsDetail.title }}</h1>
  16. <p>
  17. 来源: <span>{{ newsDetail.copyfrom }}</span>
  18. 作者: <span>{{ newsDetail.author }}</span>
  19. 发布时间: <span>{{ time }}</span>
  20. </p>
  21. </div>
  22. <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content" @click="openPreview">
  23. </div>
  24. <div v-if="previewVisible" class="preview-modal" @click="closePreview">
  25. <img :src="selectedImage" alt="Preview">
  26. </div>
  27. <!-- 免责声明: -->
  28. <div class="disclaimer" v-if="newsDetail.fromurl">
  29. <p>原文链接:{{ newsDetail.fromurl }}</p>
  30. <p>[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。 版权归原作者所有,如涉及作品内容,版权和其他问题,请在30日与本网联系,我们将第一时间处理。</p>
  31. </div>
  32. <div v-if="articleChoice">
  33. <!-- 投票 start ---------------------------------------->
  34. <div class="index_3_box_vote" v-if="articleChoice">
  35. <div class="voteTitle">投票区</div>
  36. <div class="inquire">
  37. <p v-if="voteList.length > 0">{{ voteList[0].survey_name }}</p>
  38. <div class="radioBox">
  39. <!--投票选项-->
  40. <div v-if="!isDisabled">
  41. <div class="radio" v-if="isRadio">
  42. <el-radio-group v-model="radio1" @change="handleRadioChange">
  43. <el-radio v-for="item in voteList" :key="item.id" :value="item.id"
  44. size="large">
  45. <span v-if="item.is_other == 0">{{ item.choice_name }}</span>
  46. <span v-else>其他</span>
  47. </el-radio>
  48. </el-radio-group>
  49. <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
  50. resize="none" placeholder="请输入.." />
  51. </div>
  52. <div class="checkInputBox" v-else>
  53. <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
  54. <span v-for="item in voteList" :key="item.id">
  55. <span v-if="item.is_other == 0">
  56. <el-checkbox size="large" :label="item.choice_name"
  57. :value="item.id" />
  58. </span>
  59. <span v-else>
  60. <el-checkbox size="large" label="其他" :value="item.id" />
  61. </span>
  62. </span>
  63. </el-checkbox-group>
  64. <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
  65. resize="none" placeholder="请输入.." />
  66. </div>
  67. </div>
  68. <!--投票结果-->
  69. <div class="inquireData" v-else>
  70. <div v-for="item in websiteSurveyData.data" :key="item.id">
  71. <div class="inquireDataItem active" v-if="item.status == 1">
  72. <div class="inquireDataItemTitle">
  73. <span v-if="item.choice_name == ''">其他</span>
  74. <span v-else>{{ item.choice_name }}</span>
  75. </div>
  76. <div class="inquireDataItemNum">{{ item.results }}票</div>
  77. </div>
  78. <div class="inquireDataItem" v-else>
  79. <div class="inquireDataItemTitle">
  80. <span v-if="item.choice_name == ''">其他</span>
  81. <span v-else>{{ item.choice_name }}</span>
  82. </div>
  83. <div class="inquireDataItemNum">{{ item.results }}票</div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="btn">
  89. <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled"
  90. v-if="!isDisabled">投票</button>
  91. </div>
  92. </div>
  93. </div>
  94. <!-- 投票 end ---------------------------------------->
  95. </div>
  96. </div>
  97. <div class="innerRight">
  98. <!-- 热点资讯1 -->
  99. <div class="hotList1">
  100. <DetailHotNews></DetailHotNews>
  101. </div>
  102. <!-- 热点资讯2 -->
  103. <div class="hotList2">
  104. <DetailHotNews2></DetailHotNews2>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <!-- 广告2 -->
  110. <HomeAdvertising :imgurl="adImg2"></HomeAdvertising>
  111. <!-- 页面底部 -->
  112. <HomeFoot1></HomeFoot1>
  113. </template>
  114. <script setup>
  115. //1.页面依赖 start ---------------------------------------->
  116. import { onMounted } from 'vue'
  117. import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup, ElMessage, ElCheckboxGroup, ElCheckbox, ElInput } from 'element-plus'
  118. import { ArrowRight } from '@element-plus/icons-vue'
  119. //1.1 获得跳转过来的id
  120. const route = useRoute();
  121. //获得详情id
  122. const articleId = parseInt(route.params.id); //获得该页面的id
  123. //获得当前的完整路径
  124. const fullPath = route.path;
  125. //拆分,取出来中间这一段,然后提取数字部分
  126. const segments = fullPath.split('/');
  127. const targetSegment = segments[1];
  128. // const numberPart = targetSegment.match(/\d+$/)?.[0];
  129. // let routeId = 20 //排除路径错误可以打开这个
  130. // const routeId = numberPart;
  131. let routeId;
  132. //通过导航路径反向查询导航id
  133. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  134. method: 'GET',
  135. query: {
  136. 'pinyin': targetSegment,
  137. },
  138. });
  139. if (getRouteId.code == 200) {
  140. routeId = getRouteId.data.category_id
  141. } else {
  142. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  143. console.log("错误位置:通过url路径查询导航池id")
  144. console.log("后端错误反馈:", getRouteId.message)
  145. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  146. }
  147. //1.2 获得父级栏目的名称、id
  148. const parent_name = ref([]);
  149. const parent_id = ref([]);
  150. const parent_pinyin = ref("");
  151. const parent_children_count = ref(0)
  152. let getParentNav = async () => {
  153. const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
  154. method: 'GET',
  155. query: {
  156. 'catid': routeId
  157. },
  158. });
  159. console.log("获取父级栏目数据")
  160. console.log(listData)
  161. if (listData.code == 200) {
  162. console.log(listData.data);
  163. parent_name.value = listData.data.alias;
  164. parent_id.value = listData.data.parent_id;
  165. parent_pinyin.value = listData.data.aLIas_pinyin;
  166. parent_children_count = listData.data.children_coun;
  167. } else {
  168. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  169. console.log("错误位置:获取面包屑导航")
  170. console.log("后端错误反馈:", listData.message)
  171. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  172. }
  173. }
  174. //获得父级栏目详情
  175. getParentNav();
  176. //1.页面依赖 end ---------------------------------------->
  177. //2.页面数据 start ---------------------------------------->
  178. //2.1 资讯详情
  179. const newsDetail = ref({})
  180. const routeNewsTtitle = ref("");
  181. //2.2 发布日期
  182. const time = ref("");
  183. //2.3 路径
  184. const routLevelTitle = ref("");
  185. const routLevelId = ref("");
  186. //是否展示投票
  187. const articleChoice = ref(false);
  188. //2.4获取详情
  189. async function getPageData() {
  190. const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  191. method: 'GET',
  192. query: {
  193. 'articleid': articleId
  194. },
  195. });
  196. if (mkdata.code == 200) {
  197. //判断是否显示投票
  198. if (mkdata.data.is_survey == 1) {
  199. console.log("本篇文章含有投票!")
  200. articleChoice.value = true;
  201. getVoteList();
  202. }
  203. //获取内容
  204. newsDetail.value = mkdata.data;
  205. //获取路径
  206. routLevelTitle.value = newsDetail.value.cat_name;
  207. routLevelId.value = newsDetail.value.category_id;
  208. //获取发布时间
  209. time.value = newsDetail.value.updated_at.split(' ')[0];
  210. //修正标题长度
  211. if (newsDetail.value.title.length >= 20) {
  212. routeNewsTtitle.value = newsDetail.value.title.substr(0, 20) + "...";
  213. } else {
  214. routeNewsTtitle.value = newsDetail.value.title
  215. }
  216. } else {
  217. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  218. console.log("错误位置:获取详情内容")
  219. console.log("后端错误反馈:", mkdata.message)
  220. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  221. }
  222. }
  223. getPageData();
  224. //2.5 获得广告
  225. //广告列表
  226. let adImg1 = ref([]);
  227. let adImg2 = ref([]);
  228. onMounted(async () => {
  229. const { $webUrl, $CwebUrl } = useNuxtApp();
  230. //广告1
  231. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_detail_0001`
  232. const responseAd1 = await fetch(url, {
  233. headers: {
  234. 'Content-Type': 'application/json',
  235. 'Userurl': $CwebUrl,
  236. 'Origin': $CwebUrl
  237. }
  238. });
  239. const resultAd1 = await responseAd1.json();
  240. adImg1.value = resultAd1.data[0];
  241. //广告2
  242. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_detail_0002`
  243. const responseAd2 = await fetch(url2, {
  244. headers: {
  245. 'Content-Type': 'application/json',
  246. 'Userurl': $CwebUrl,
  247. 'Origin': $CwebUrl
  248. }
  249. });
  250. const resultAd2 = await responseAd2.json();
  251. adImg2.value = resultAd2.data[0];
  252. })
  253. //2.页面数据 end ---------------------------------------->
  254. //3.设置seo信息 start---------------------------------------->
  255. //3.1 设置seo信息
  256. const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  257. method: 'GET',
  258. query: {
  259. 'articleid': articleId
  260. },
  261. });
  262. if (setData.code == 200) {
  263. let seoTitle = setData.data.title;
  264. let seoDescription = setData.data.introduce;
  265. let seoKeywords = setData.data.keyword;
  266. let seoSuffix = setData.data.suffix;
  267. let seoName = setData.data.website_name;
  268. useSeoMeta({
  269. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  270. meta: [
  271. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  272. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  273. ]
  274. });
  275. } else {
  276. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  277. console.log("错误位置:设置详情页面SEO数据")
  278. console.log("后端错误反馈:", setData.message)
  279. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  280. }
  281. //3.设置seo信息 end---------------------------------------->
  282. //4.投票 start---------------------------------------->
  283. const radio1 = ref(''); //单选
  284. const check1 = ref([]); //多选
  285. const isDisabled = ref(false);//是否禁用提交按钮
  286. const isRadio = ref(true);//是否渲染单选
  287. const userSurId = ref('');//投票属于哪一篇文章
  288. const userChoice = ref('');//用于判断用户选择了其他选项以后,输入的值
  289. const userIsChoice = ref('');//用于判断其他选项目前是什么值
  290. const showUserChoice = ref(false);//是否显示其他输入框
  291. const websiteSurveyData = ref([]);//投票结果
  292. //3.2获得投票列表
  293. let voteList = ref([]);
  294. async function getVoteList() {
  295. const voteData = await requestHome('/web/getWebsiteSurvey', { method: 'GET', query: { 'art_id': articleId } });
  296. console.log(778899)
  297. console.log('778899', voteData)
  298. if (voteData.code == 200) {
  299. voteList.value = voteData.data;
  300. console.log(voteList.value)
  301. //判断显示单选还是多选
  302. //survey_type 0是单选 1是多选
  303. if (voteData.data[0].survey_type == 0) {
  304. isRadio.value = true;
  305. console.log("1111")
  306. } else {
  307. isRadio.value = false;
  308. }
  309. //把最后一个的值拿出来 用于判断用户是否选择了其他
  310. for (let item of voteData.data) {
  311. //如果含有其他
  312. if (item.is_other == 1) {
  313. userIsChoice.value = item.id;
  314. }
  315. }
  316. //用户投票属于哪一篇文章
  317. userSurId.value = voteData.data[0].sur_id;
  318. } else {
  319. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  320. console.log("错误位置:首页投票")
  321. console.log("后端错误反馈:", voteData.message)
  322. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  323. }
  324. }
  325. //3.2当用户选择了选项,判断是否展示其他输入框
  326. const handleRadioChange = (value) => {
  327. console.log('11111', value, userIsChoice.value);
  328. if (value == userIsChoice.value) {
  329. showUserChoice.value = true;
  330. } else {
  331. showUserChoice.value = false;
  332. }
  333. }
  334. const handleCheckboxChange = (value) => {
  335. if (value.includes(userIsChoice.value)) {
  336. showUserChoice.value = true;
  337. } else {
  338. showUserChoice.value = false;
  339. }
  340. }
  341. //3.2发起投票
  342. async function addWebsiteSurvey() {
  343. //判断当前是单选还是多选
  344. console.log(isRadio.value)
  345. if (isRadio.value) {
  346. console.log("用户单选!")
  347. if (radio1.value != '') {
  348. //先判断一下是否使用了其他选项
  349. if (showUserChoice.value) {
  350. if (userChoice.value != '') {
  351. //文章id
  352. // console.log(userSurId.value)
  353. // 用户输入的值
  354. // console.log(userChoice.value)
  355. //如果使用了其他,其他的选项需要增加进去
  356. const ChoiceData = await requestHome('/web/addWebsiteSurveyOption', {
  357. method: 'GET',
  358. query: {
  359. 'sur_id': userSurId.value,//投票的新闻id
  360. 'choice_name': userChoice.value,//投票的选项id
  361. }
  362. });
  363. if (ChoiceData.code == 200) {
  364. //提交完其他选项以后,再正式发起投票
  365. const mkData = await requestHome('/web/addWebsiteSurveyVote', {
  366. method: 'GET',
  367. query: {
  368. 'sur_id': userSurId.value,
  369. 'choice_id': ChoiceData.data
  370. }
  371. });
  372. if (mkData.code == 200) {
  373. ElMessage.success('投票成功!')
  374. //把投票结果显示到页面上 禁用投票按钮
  375. isDisabled.value = true;
  376. websiteSurveyData.value = mkData.data;
  377. //遍历一下,把用户选中的那个设置status为1
  378. let data = mkData.data;
  379. //遍历一下,把用户选中的那个设置status为1
  380. for (let item of data.data) {
  381. for (let i of data.choice) {
  382. if (item.id == i) {
  383. console.log(item.id)
  384. item.status = 1;
  385. }
  386. }
  387. }
  388. websiteSurveyData.value = data;
  389. } else {
  390. ElMessage.error(mkData.message)
  391. }
  392. } else {
  393. ElMessage.error('其他投票失败!')
  394. }
  395. } else {
  396. ElMessage.error('请输入选项内容!')
  397. }
  398. } else {
  399. console.log('111', userSurId.value);
  400. console.log('222', radio1.value);
  401. //如果没选择其他,直接提交选择的内容
  402. const mkData = await requestHome('/web/addWebsiteSurveyVote', {
  403. method: 'GET',
  404. query: {
  405. 'sur_id': userSurId.value,
  406. 'choice_id': radio1.value
  407. }
  408. });
  409. if (mkData.code == 200) {
  410. ElMessage.success('投票成功!')
  411. //把投票结果显示到页面上 禁用投票按钮
  412. isDisabled.value = true;
  413. let data = mkData.data;
  414. //遍历一下,把用户选中的那个设置status为1
  415. for (let item of data.data) {
  416. for (let i of data.choice) {
  417. if (item.id == i) {
  418. item.status = 1;
  419. }
  420. }
  421. }
  422. websiteSurveyData.value = data;
  423. } else {
  424. ElMessage.error('投票失败!')
  425. }
  426. }
  427. } else {
  428. ElMessage.error('请选择一个选项')
  429. }
  430. } else {
  431. console.log("多选!")
  432. //多选
  433. if (check1.value != []) {
  434. //先判断一下是否使用了其他选项
  435. if (showUserChoice.value) {
  436. if (userChoice.value != '') {
  437. //判断用户是否只选择了一个其他
  438. if (check1.value.length == 1) {
  439. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
  440. method: 'GET',
  441. query: {
  442. 'sur_id': userSurId.value,//投票的新闻id
  443. 'choice_name': userChoice.value,//用户输入的其他选项文字
  444. }
  445. });
  446. if (ChoiceData.code == 200) {
  447. //提交完其他选项以后,再正式发起投票
  448. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  449. method: 'GET',
  450. query: {
  451. 'sur_id': userSurId.value,
  452. 'choice_id': ChoiceData.data
  453. }
  454. });
  455. if (mkData.code == 200) {
  456. ElMessage.success('投票成功!')
  457. //把投票结果显示到页面上 禁用投票按钮
  458. isDisabled.value = true;
  459. websiteSurveyData.value = mkData.data;
  460. //遍历一下,把用户选中的那个设置status为1
  461. let data = mkData.data;
  462. //遍历一下,把用户选中的那个设置status为1
  463. for (let item of data.data) {
  464. for (let i of data.choice) {
  465. if (item.id == i) {
  466. console.log(item.id)
  467. item.status = 1;
  468. }
  469. }
  470. }
  471. websiteSurveyData.value = data;
  472. } else {
  473. ElMessage.error(mkData.message)
  474. }
  475. } else {
  476. ElMessage.error('其他投票失败!')
  477. }
  478. } else {
  479. //用户选择了除了其他以外,还包括别的选项
  480. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
  481. method: 'GET',
  482. query: {
  483. 'sur_id': userSurId.value,//投票的新闻id
  484. 'choice_name': userChoice.value,//用户输入的其他选项文字
  485. }
  486. });
  487. if (ChoiceData.code == 200) {
  488. let data = check1.value;
  489. //找到多选的数组,把其他默认值给替换掉
  490. for (let i = 0; i < data.length; i++) {
  491. if (data[i] == userIsChoice.value) {
  492. data[i] = ChoiceData.data;
  493. }
  494. }
  495. let jsonArray = JSON.stringify(data);
  496. //提交完其他选项以后,再正式发起投票
  497. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  498. method: 'GET',
  499. query: {
  500. 'sur_id': userSurId.value,
  501. 'choice_id': jsonArray
  502. }
  503. });
  504. if (mkData.code == 200) {
  505. ElMessage.success('投票成功!')
  506. //把投票结果显示到页面上 禁用投票按钮
  507. isDisabled.value = true;
  508. websiteSurveyData.value = mkData.data;
  509. //遍历一下,把用户选中的那个设置status为1
  510. let data = mkData.data;
  511. //遍历一下,把用户选中的那个设置status为1
  512. for (let item of data.data) {
  513. for (let i of data.choice) {
  514. if (item.id == i) {
  515. //console.log(item.id)
  516. item.status = 1;
  517. }
  518. }
  519. }
  520. websiteSurveyData.value = data;
  521. } else {
  522. ElMessage.error(mkData.message)
  523. }
  524. } else {
  525. ElMessage.error('其他投票失败!')
  526. }
  527. }
  528. } else {
  529. ElMessage.error('请输入选项内容!')
  530. }
  531. } else {
  532. let jsonArray = JSON.stringify(check1.value);
  533. //如果没选择其他,直接提交选择的内容
  534. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  535. method: 'GET',
  536. query: {
  537. 'sur_id': userSurId.value,
  538. 'choice_id': jsonArray
  539. }
  540. });
  541. if (mkData.code == 200) {
  542. ElMessage.success('投票成功!')
  543. //把投票结果显示到页面上 禁用投票按钮
  544. isDisabled.value = true;
  545. websiteSurveyData.value = mkData.data;
  546. //遍历一下,把用户选中的那个设置status为1
  547. let data = mkData.data;
  548. //遍历一下,把用户选中的那个设置status为1
  549. for (let item of data.data) {
  550. for (let i of data.choice) {
  551. if (item.id == i) {
  552. console.log(item.id)
  553. item.status = 1;
  554. }
  555. }
  556. }
  557. websiteSurveyData.value = data;
  558. } else {
  559. ElMessage.error('投票失败!')
  560. }
  561. }
  562. } else {
  563. ElMessage.error('请选择一个选项')
  564. }
  565. }
  566. }
  567. //4.投票 end---------------------------------------->
  568. //5.页面图片放大 start---------------------------------------->
  569. const previewVisible = ref(false)
  570. const selectedImage = ref(' ')
  571. const openPreview = (event) => {
  572. if (event.target.tagName === 'IMG') {
  573. selectedImage.value = event.target.src;
  574. previewVisible.value = true;
  575. }
  576. }
  577. const closePreview = () => {
  578. previewVisible.value = false;
  579. }
  580. //5.页面图片放大 end---------------------------------------->
  581. </script>
  582. <style lang="less" scoped>
  583. @import url('@/assets/css/detail.less');
  584. </style>